<template>
  <view>

    <u-swiper :list="list1" height="200" :indicator="true" @click="swiperClick"></u-swiper>
    <view class="first">
      <view class="p30">
        <view class="hotel-title">{{item.title}}</view>
        <view class="intro">
          {{content}}
        </view>
        <view class="tag">
          <view v-for="item in 3"><u-tag text="标签" type="warning" plain plainFill></u-tag></view>

        </view>
        <view class="title">位置</view>
        <view class="address">
          <u-icon name="map"></u-icon>
          <text>乌鲁木齐 xx 路 xx 号</text>
        </view>
        <view class="title">日期选择</view>
        <view class="time_box f">
          <scroll-view scroll-x="true" class="item_box">
            <view class="item f_d f_z" :class="[index===time_action?'action':'']"
                  v-for="(item,index) in detail.dates" :key="index" @click="time_check(index,item)">
              <view class="week" style="white-space:normal;font-size: 12px;">
                {{ item.weekDay }}
              </view>
              <view class="day" style="white-space:normal;font-size: 16px;font-weight: bold;">
                {{ item.date }}
              </view>
              <!-- <view class="price">
                <text>￥</text>
                <text>99</text>
              </view> -->
            </view>
          </scroll-view>
          <view class="more f_zj" @click="calendar_show=true">
            全部
          </view>
        </view>
      </view>
    </view>
    <view class="second">
    <view class="text"><view class="text-left">保障</view><view class="left-right">很好</view></view>
    <view class="text"><view class="text-left">使用人数</view><view class="left-right"> 3-5人</view></view>
    <view class="text"><view class="text-left">预约规则</view><view class="left-right">12:00-13:00</view></view>
    <view class="text"><view class="text-left">联系电话</view><view class="left-right"> 88888888</view></view>


    </view>
    <view class="third">
      <u-tabs :list="tabList" @click="tabClick"></u-tabs>
      <swiper
          style="height: 500rpx"
          @change="onSwiperChange"
          :current="current"
      >
        <swiper-item v-for="(item, index) in list" :key="index" >
          <view :id="'swiper-item-' + index" class="swiper-content">
            <!-- 这里是你的实际内容 -->
            <scroll-view :scroll-y="true" style="height: 500rpx">{{ item.desc }}</scroll-view>


          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="btn ">
      <view class="money">¥1500</view>
      <view style="width: 300rpx"><u-button  color="#000" text="预定" @click="toConfirm"></u-button></view>
    </view>
    <u-calendar color='black' :minDate='minDate' :defaultDate='minDate' :show="calendar_show" closeOnClickOverlay
                @confirm="confirm" @close="calendar_show=false"></u-calendar>
  </view>
</template>

<script>


export default {

  data() {
    return {
      tabList:[{
        name: '关注',
      }, {
        name: '推荐',
      }, {
        name: '电影'
      }],
      list: [
        { desc: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。\n				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。\n				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？', image: '/static/1.jpg' },
        {  desc: '描述内容2', image: '/static/2.jpg' }
      ],
      current:0,

      minDate: '',
      time_action:0,
      calendar_show:false,
      list1: [
        "https://uviewui.com/swiper/swiper1.png",
        "https://uviewui.com/swiper/swiper2.png",
        "https://uviewui.com/swiper/swiper3.png",
      ],
      content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
    }
  },
  onLoad(option) {
    console.log(option);
  },
  onShow() {

  },
  methods: {
    toConfirm(){
      uni.navigateTo({
        url: '/pages/whotel/hotelConfirm'
      })
    },
    tabClick(e){
      console.log(e)
      this.current=e.index

    },
    onSwiperChange(e){
      this.current=e.detail.current

    },

    time_check(item,index){

    },
    swiperClick(e) {
      console.log(e)
    },

  }
}
</script>

<style lang="scss">
page{
  background-color: #F5F5F5;
  padding-bottom: calc(env(safe-area-inset-bottom) + 90rpx);
}
.p30 {
  padding: 30rpx;
  background-color: #fff;
  border-radius:0 0 30rpx 30rpx;
}

.hotel-title {
  font-size: 36rpx;
}
.intro{
  margin-top: 20rpx;
}
.tag{
  display: flex;
  margin-top: 20rpx;
  view{
    margin-right: 5rpx;
  }
}
.title{
  margin-top: 30rpx;
  position: relative;
  padding-left: 20rpx;
  font-size: 32rpx;
  line-height: 40rpx;
}
.title::after{
  content: "";
  width: 8rpx;
  height: 30rpx;
  background-color: #61916f;
  position: absolute;
  left: 0;
  top: 5rpx;
  border-radius: 99rpx;
}
.address{
display: flex;
  padding: 20rpx;
  background-color:#F6F6F6;
  color:gray;
  border-radius: 20rpx;
  margin-top: 20rpx;
}
.time_box {
  margin-top: 10rpx;

  .item_box {
    padding: 10rpx 0rpx;
    width: 550rpx;
    white-space: nowrap;
    // border: 1rpx solid red;

    .item {
      display: inline-block;
      padding: 10rpx 20rpx;
      background: #F8F8F8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 40rpx;
      color: #3D3D3D;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-right: 10rpx;

      .week {
        margin-bottom: 10rpx;
      }

      .day {
        margin-bottom: 10rpx;
      }

      .price {
      }
    }
  }

  .more {
    padding: 0rpx 10rpx;
    margin-left: 10px;
    font-weight: 400;
    font-size: 22rpx;
    color: #3D3D3D;
    line-height: 30rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.second {
  background-color: #FFFFFF;
  border-radius: 30rpx;
  padding:20rpx 30rpx 30rpx 30rpx;
  margin-top: 30rpx;
  .text {
    padding-top: 10rpx;
    display: flex;
    .text-left {
      color: gray;
      font-size: 26rpx;
      width: 140rpx;

    }


  }
}
.third{
  margin-top: 30rpx;
  background-color: #FFFFFF;
  border-radius: 30rpx;
  padding:20rpx;
  margin-bottom: 30rpx;
}
.btn{
  z-index: 99999;
  background-color: white;
  font-size:26rpx !important;
  font-weight: normal;
  color: gray;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top:1px solid #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx env(safe-area-inset-bottom);
  //padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧版 */
  .money{
    color: black;
    font-size: 40rpx;
  }
}
</style>
